<template>
  <a-card :bordered="false" style="overflow: scroll;height: calc(100vh - 95px)">
    <div style="mi-width: 1000px;background-color: #FFFFFF;padding: 12px;">
      <a-spin tip="Loading..." :spinning="pcLoading">
        <a-form-model layout="horizontal" :model="pcForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="row-title ">
            <h2 style="margin:2px 24px 0 0">PC商城信息</h2>
          </div>
          <a-divider></a-divider>
          <div class="title">
            <div class="form-row">
              <div class="label">商城信息：</div>
              <a-textarea v-model="pcForm.smIntroduce" placeholder="请输入" allow-clear style="width: 300px"/>
            </div>
            <div class="form-row">
              <div class="label">支付方式：</div>
              <cn-multi-select-tag
                style="width: 300px"
                dictCode="pay_type"
                v-model="pcForm.payMethod"
                type="select">
              </cn-multi-select-tag>
            </div>
          </div>
          <a-divider orientation="left">广告配置</a-divider>
          <div class="image-box" v-for="(item,index) in pcForm.applyRangeVoList" :key="index">
            <div class="image-small-box">
              <div class="orgen">
                <h4 class="label">适用范围</h4>
                <j-tree-select v-model="item.applyRangeCode" placeholder="适用范围" data-type="org" style="width: 180px"
                               show-search
                               tree-node-filter-prop="title"
                               @change="(code,label)=>handleSelectPc(label,index)"/>
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[0].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[0].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[0].productCode,goodsName:item.rotatePicVoList[0].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsPc($event,index,0)"
                                 class="form-input"
                />
                <!--                <a-input placeholder="商品编号" class="form-input"></a-input>-->
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[1].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[1].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[1].productCode,goodsName:item.rotatePicVoList[1].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsPc($event,index,1)"
                                 class="form-input"
                />
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[2].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[2].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[2].productCode,goodsName:item.rotatePicVoList[2].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsPc($event,index,2)"
                                 class="form-input"
                />
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[3].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[3].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[3].productCode,goodsName:item.rotatePicVoList[3].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsPc($event,index,3)"
                                 class="form-input"
                />
              </div>
            </div>
            <div class="image-small-box">
              <div style="text-align: center">
                <a @click='rowAdd("pcForm")'>+</a>
                <a-icon v-if="index!==0" type="delete" theme="filled"
                        style="font-size: 32px;color:#999;margin-left: 24px; " @click='rowDetele(index,"pcForm")'/>
                <div>
                  <a-button type="primary" style="margin-top:12px" @click="saveConfigPc">保存配置</a-button>
                </div>
              </div>
            </div>
          </div>
        </a-form-model>
      </a-spin>
      <a-spin tip="Loading..." :spinning="pcLoading">
        <a-form-model layout="horizontal" :model="sjForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <div class="row-title ">
            <h2 style="margin:2px 24px 0 0">移动商城信息</h2>
          </div>
          <a-divider></a-divider>
          <div class="title">
            <div class="form-row">
              <div class="label">商城信息：</div>
              <a-textarea v-model="sjForm.smIntroduce" placeholder="请输入" allow-clear style="width: 300px"/>
            </div>
            <div class="form-row">
              <div class="label">支付方式：</div>
              <cn-multi-select-tag
                style="width: 300px"
                dictCode="pay_type"
                v-model="sjForm.payMethod"
                type="select">
              </cn-multi-select-tag>
            </div>
          </div>
          <a-divider orientation="left">广告配置</a-divider>
          <span>
          <div class="image-box" v-for="(item,index) in sjForm.applyRangeVoList" :key="index">
            <div class="image-small-box">
              <div class="orgen">
                <h4 class="label">适用范围</h4>
                <j-tree-select v-model="item.applyRangeCode" placeholder="适用范围" data-type="org" style="width: 180px"
                               show-search
                               tree-node-filter-prop="title"
                               @change="(code,label)=>handleSelectPc(label,index)"/>
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[0].url"
                          accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[0].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[0].productCode,goodsName:item.rotatePicVoList[0].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsSj($event,index,0)"
                                 class="form-input">
                </cn-select-goods>
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[1].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[1].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[1].productCode,goodsName:item.rotatePicVoList[1].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsSj($event,index,1)"
                                 class="form-input">
                </cn-select-goods>
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[2].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[2].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[2].productCode,goodsName:item.rotatePicVoList[2].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsSj($event,index,2)"
                                 class="form-input">
                </cn-select-goods>
              </div>
            </div>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.rotatePicVoList[3].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="轮播图"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.rotatePicVoList[3].remarks"
                                 :giveBackList="[{goodsCode:item.rotatePicVoList[3].productCode,goodsName:item.rotatePicVoList[3].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsSj($event,index,3)"
                                 class="form-input">
                </cn-select-goods>
              </div>
            </div>
            <a-divider type="vertical" style="height: 100px;margin: 0;margin-right: 8px"/>
            <div class="image-small-box">
              <div>
                <j-upload v-model="item.recommendVos[0].url" accept=".png,.jpg,.jpeg" fileType="image"
                          class="avatar-uploader"
                          :number="1" text="推荐广告"
                          :returnUrl="true"></j-upload>
                <cn-select-goods v-model="item.recommendVos[0].remarks"
                                 :giveBackList="[{goodsCode:item.recommendVos[0].productCode,goodsName:item.recommendVos[0].remarks}]"
                                 selectButtonText="选择"
                                 :inputs="true"
                                 :buttons="false"
                                 :multiple="false"
                                 rowKey="goodsCode"
                                 :returnName="true"
                                 :disabled="disableSubmit"
                                 @select="selectGoodsTj($event,index)"
                                 class="form-input">
                </cn-select-goods>
              </div>
            </div>
            <div class="image-small-box">
              <div style="text-align: center">
                <a @click='rowAdd("sjForm")'>+</a>
                <a-icon v-if="index!==0" type="delete" theme="filled"
                        style="font-size: 32px;color:#999;margin-left: 24px; " @click='rowDetele(index,"sjForm")'/>
                <div>
                  <a-button type="primary" style="margin-top:12px" @click="saveConfigSj">保存配置</a-button>
                </div>
              </div>
            </div>
          </div>
             </span>
        </a-form-model>
      </a-spin>
      <!--    <a-spin tip='Loading...' :spinning='smLoading'>-->
      <!--      <a-form-model layout='horizontal' :model='sjForm' :label-col='labelCol' :wrapper-col='wrapperCol'>-->
      <!--        <div class='row-title '>-->
      <!--          <h2 style='margin:2px 24px 0 0'>移动商城信息</h2>-->
      <!--          <a-button type='primary' style='margin-right: 24px' @click='saveConfigSj'>保存配置</a-button>-->
      <!--        </div>-->

      <!--        <div class='title'>-->
      <!--          <a-form-model-item label='商城信息'>-->
      <!--            <a-textarea v-model='sjForm.smIntroduce' placeholder='请输入' allow-clear />-->
      <!--          </a-form-model-item>-->
      <!--          <a-form-model-item label='支付方式'>-->
      <!--            <a-select v-model='sjForm.payMethod' default-value='lucy' style=''>-->
      <!--              <a-select-option value='jack'>-->
      <!--                Jack-->
      <!--              </a-select-option>-->
      <!--              <a-select-option value='lucy'>-->
      <!--                Lucy-->
      <!--              </a-select-option>-->
      <!--              <a-select-option value='disabled' disabled>-->
      <!--                Disabled-->
      <!--              </a-select-option>-->
      <!--              <a-select-option value='Yiminghe'>-->
      <!--                yiminghe-->
      <!--              </a-select-option>-->
      <!--            </a-select>-->
      <!--          </a-form-model-item>-->
      <!--        </div>-->
      <!--        <div>-->
      <!--          <div class='row-title'>-->
      <!--            <h4 style='margin:2px 24px 0 0'>广告配置</h4>-->
      <!--            <a-button type='primary' style='margin-right: 24px' @click='rowAdd("sjForm")'>新增行</a-button>-->
      <!--          </div>-->
      <!--          <div v-for='(item,index) in sjForm.applyRangeVoList' class='pic_list'>-->
      <!--            <a-form-model-item label='适用范围'>-->
      <!--              <span style='display: flex;justify-content: space-between'>-->
      <!--                <j-tree-select v-model='item.applyRangeCode' placeholder='适用范围' data-type='org' style='width: 300px'-->
      <!--                               @change='(code,label)=>handleSelectSj(label,index)' />-->
      <!--                <a-button type='danger' style='margin-left: 24px' @click='rowDetele(index,"sjForm")'>删除行</a-button>-->
      <!--              </span>-->
      <!--            </a-form-model-item>-->
      <!--            <a-form-model-item label='轮播图' :wrapperCol='{ span: 20 }' style='margin-bottom: 0 !important;'>-->
      <!--              <JUploadInput v-model='item.rotatePicVoList' accept='.png,.jpg,.jpeg' fileType='image'-->
      <!--                            class='avatar-uploader'-->
      <!--                            :number='4' text='轮播图'-->
      <!--                            :returnUrl='false'></JUploadInput>-->
      <!--            </a-form-model-item>-->
      <!--            &lt;!&ndash;            <a-form-model-item v-if='item.rotatePicVoList&&item.rotatePicVoList.length' label='商品编号'&ndash;&gt;-->
      <!--            &lt;!&ndash;                               :wrapperCol='{ span: 20 }'>&ndash;&gt;-->
      <!--            &lt;!&ndash;              <span v-for='(row,index) in item.rotatePicVoList'>&ndash;&gt;-->
      <!--            &lt;!&ndash;                 <a-input v-model='row.productCode' placeholder='商品编号' class='form-input'></a-input>&ndash;&gt;-->
      <!--            &lt;!&ndash;              </span>&ndash;&gt;-->
      <!--            &lt;!&ndash;            </a-form-model-item>&ndash;&gt;-->
      <!--            &lt;!&ndash;            <div v-else style='height: 40px'>&ndash;&gt;-->

      <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
      <!--            <a-form-model-item label='推荐广告' :wrapperCol='{ span: 20 }' style='margin-bottom: 0 !important;'>-->
      <!--              <JUploadInput v-model='item.recommendVos' accept='.png,.jpg,.jpeg' fileType='image'-->
      <!--                            class='avatar-uploader'-->
      <!--                            :number='1' text='推荐广告'-->
      <!--                            :returnUrl='false'></JUploadInput>-->
      <!--            </a-form-model-item>-->
      <!--            &lt;!&ndash;            <a-form-model-item label='推荐广告' :wrapperCol='{ span: 20 }' style='margin-bottom: 0 !important;'>&ndash;&gt;-->
      <!--            &lt;!&ndash;              <JUpload v-model='item.recommendVos' accept='.png,.jpg,.jpeg' fileType='image' class='avatar-uploader'&ndash;&gt;-->
      <!--            &lt;!&ndash;                       :number='1' text='轮播图' :returnUrl='false'></JUpload>&ndash;&gt;-->
      <!--            &lt;!&ndash;            </a-form-model-item>&ndash;&gt;-->
      <!--            &lt;!&ndash;            <a-form-model-item v-if='item.recommendVos&&item.recommendVos.length' label='商品编号'&ndash;&gt;-->
      <!--            &lt;!&ndash;                               :wrapperCol='{ span: 20 }'>&ndash;&gt;-->
      <!--            &lt;!&ndash;              <span v-for='(row,index) in item.recommendVos'>&ndash;&gt;-->
      <!--            &lt;!&ndash;                 <a-input v-model='row.productCode' placeholder='商品编号' class='form-input'></a-input>&ndash;&gt;-->
      <!--            &lt;!&ndash;              </span>&ndash;&gt;-->
      <!--            &lt;!&ndash;            </a-form-model-item>&ndash;&gt;-->
      <!--            &lt;!&ndash;            <div v-else style='height: 40px'>&ndash;&gt;-->

      <!--            &lt;!&ndash;            </div>&ndash;&gt;-->

      <!--            <a-divider dashed />-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </a-form-model>-->
      <!--    </a-spin>-->
    </div>
  </a-card>
</template>

<script>

import JUpload from '@/components/cn-form/JUpload'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import { deleteAction, getAction, postAction } from '@/api/manage'
import JUploadInput from './modules/CnUploadInput'
import CnMultiSelectTag from '@/components/dict/CnMultiSelectTag'
import CnSelectGoods from '@comp/cn-select-popup/CnSelectGoods'

export default {
  name: 'product-list',
  components: { CnMultiSelectTag, JUpload, JImageUpload, JTreeSelect, JUploadInput, CnSelectGoods },
  data() {
    return {
      description: '商城配置',
      pcLoading: false,
      smLoading: false,
      labelCol: { span: 3 },
      wrapperCol: { span: 15 },
      pcForm: {
        applyRangeVoList: [{
          rotatePicVoList: [{}, {}, {}, {}],
          recommendVos: [{}]
        }]
      },
      sjForm: {
        applyRangeVoList: [{
          rotatePicVoList: [{}, {}, {}, {}],
          recommendVos: [{}]
        }]
      },
      url: {
        savePc: window._CONFIG['domianURL'] + '/shopmallconfig/cnShopmallConfig/saveOrUpdatePc',
        detailPc: window._CONFIG['domianURL'] + '/shopmallconfig/cnShopmallConfig/getPcInfo',
        saveSj: window._CONFIG['domianURL'] + '/shopmallconfig/cnShopmallConfig/saveOrUpdateApp',
        detailSj: window._CONFIG['domianURL'] + '/shopmallconfig/cnShopmallConfig/getAppInfo'
      }
    }
  },
  created() {
    this.getDetailPc()
    this.getDetailSj()
  },
  methods: {
    selectGoodsPc(select, index, indexs) {
      if (select.length) {
        this.pcForm.applyRangeVoList[index].rotatePicVoList[indexs].productCode = select[0].goodsCode
      } else {
        this.pcForm.applyRangeVoList[index].rotatePicVoList[indexs].productCode = ''
      }
    },
    selectGoodsSj(select, index, indexs) {
      if (select.length) {
        this.sjForm.applyRangeVoList[index].rotatePicVoList[indexs].productCode = select[0].goodsCode
      } else {
        this.sjForm.applyRangeVoList[index].rotatePicVoList[indexs].productCode = ''
      }
    },
    selectGoodsTj(select, index) {

      if (select.length) {
        this.sjForm.applyRangeVoList[index].recommendVos[0].productCode = select[0].goodsCode
      } else {
        this.sjForm.applyRangeVoList[index].recommendVos[0].productCode = ''
      }
    },

    rowAdd(form) {
      this[form].applyRangeVoList.push({
        rotatePicVoList: [{}, {}, {}, {}],
        recommendVos: [{}]
      })
      console.log()
    },
    rowDetele(index, form) {
      this[form].applyRangeVoList.splice(index, 1)
    },
    async saveConfigPc() {
      console.log(this.pcForm)
      let params = this.pcForm
      params.applyRangeVoList.forEach(item => {
        item.rotatePicVoList.forEach(value => value.fileName = value.name)
      })
      this.pcLoading = true
      let res = await postAction(this.url.savePc, params)
      this.pcLoading = false
      if (res.success) {
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.message)
      }
    },
    async getDetailPc() {
      this.pcLoading = true
      let res = await getAction(this.url.detailPc, { id: 1 })
      this.pcLoading = false
      if (res.success) {
        if (res.result.applyRangeVoList) {
          res.result.applyRangeVoList.forEach(item => {
            if (item.rotatePicVoList) {
              item.rotatePicVoList.forEach(value => value.name = value.fileName)
            } else {
              item.rotatePicVoList = [{}, {}, {}, {}]
            }
          })
        } else {
          res.result.applyRangeVoList = [{
            rotatePicVoList: [{}, {}, {}, {}],
            recommendVos: [{}]
          }]
        }
        this.pcForm = res.result
      } else {
        this.$message.error(res.message)
      }
    },
    async saveConfigSj() {
      console.log(this.sjForm)
      let params = this.sjForm

      params.applyRangeVoList.forEach(item => {
        item.rotatePicVoList.forEach(value => value.fileName = value.name)
        item.recommendVo = item.recommendVos[0]
      })
      this.pcLoading = true
      let res = await postAction(this.url.saveSj, params)
      this.pcLoading = false
      if (res.success) {
        this.$message.success('保存成功')
      } else {
        this.$message.error(res.message)
      }
    },
    async getDetailSj() {
      this.pcLoading = true
      let res = await getAction(this.url.detailSj, { id: 1 })
      this.pcLoading = false
      if (res.success) {
        if (res.result.applyRangeVoList) {
          res.result.applyRangeVoList.forEach(item => {
            if (item.rotatePicVoList) {
              item.rotatePicVoList.forEach(value => value.name = value.fileName)
            } else {
              item.rotatePicVoList = [{}, {}, {}, {}]
            }
            if (item.recommendVo) {
              item.recommendVos = [item.recommendVo]
            } else {
              item.recommendVos = [{}]
            }
          })
        } else {
          res.result.applyRangeVoList = [{
            rotatePicVoList: [{ url: '' }, { url: '' }, { url: '' }, { url: '' }],
            recommendVos: [{}]
          }]
        }
        this.sjForm = res.result

      } else {
        this.$message.error(res.message)
      }
    },
    handleSelectPc(label, index) {
      this.pcForm.applyRangeVoList[index].applyRangeDesc = label
    },
    handleSelectSj(label, index) {
      this.sjForm.applyRangeVoList[index].applyRangeDesc = label
    },
    changeUpload(value, index, itemIndex) {
      this.pcForm.applyRangeVoList[index].rotatePicVoList[itemIndex] = value[0]
    }

  }

}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.title {
  width: 100%;
}

.form-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;

  .label {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
  }
}

.image-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  max-width: 1000px;
  min-width: 900px;

  .image-small-box {
    min-width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    h4 {
      text-align: center;
    }

    a {
      font-weight: 700;
      font-size: 48px;
      line-height: 30px;
    }
  }

}


/deep/ .ant-card-body {
  padding: 0px !important;
  //min-width: 500px !important;
  background-color: #FFFFFF;

}

/deep/ .ant-form-item {
  margin-bottom: 8px !important;
}

.ant-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.row-title {
  display: flex;
  align-items: center;
  padding: 12px 0 0;
}

.pic_list {
  width: 550px;
  display: inline-block;
}

.form-input {
  width: 112px;
  margin-right: 8px;
}


</style>
